<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>购物车</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../xznstatic/css/common.css"/>
    <link rel="stylesheet" href="../../xznstatic/css/style.css"/>
    <script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
    <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />

    <link rel="stylesheet" href="../../css/theme.css"/>
</head>
<style>
html::after {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        content: '';
        display: block;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }

    /*轮播图相关 start*/
    #swiper {
        overflow: hidden;
    }

    #swiper .layui-carousel-ind li {
        width: 20px;
        height: 10px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, .3);
        border-radius: 6px;
        background-color: #f7f7f7;
        box-shadow: 0 0 6px rgba(255, 0, 0, .8);
    }

    #swiper .layui-carousel-ind li.layui-this {
        width: 30px;
        height: 10px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, .3);
        border-radius: 6px;
    }
    /*轮播图相关 end*/

    /*列表*/
    .recommend {
        padding: 10px 0;
        display: flex;
        justify-content: center;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

    .recommend .box {
        width: 1002px;
        margin: 0 auto;
    }

    .recommend .box .title {
        padding: 10px 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
    }

    .recommend .box .title span {
        padding: 0 10px;
        font-size: 16px;
        line-height: 1.4;
    }

    .recommend .box .filter {
        padding: 0 10px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        flex-wrap: wrap;
    }

    .recommend .box .filter .item-list {
        display: flex;
        align-items: center;
    }

    .recommend .box .filter .item-list .lable {
        font-size: 14px;
        color: #333;
        box-sizing: border-box;
    }

    .recommend .box .filter .item-list input {
        padding: 0 10px;
        box-sizing: border-box;
        outline: none;
    }

    .recommend .box .filter button {
        display: flex;
        padding: 0 10px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        outline: none;
    }

    .recommend .box .filter button i {
        margin-right: 4px;
    }

    .recommend .box .list {
        display: flex;
        flex-wrap: wrap;
    }

    .recommend .box .list .list-item {
        flex: 0 0 25%;
        padding: 0 5px;
        box-sizing: border-box;
    }

    .recommend .box .list .list-item .list-item-body {
        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 3);
        padding: 5px;
        box-sizing: border-box;
    }

    .recommend .box .list .list-item-body img {
        width: 100%;
        height: 100px;
        display: block;
        margin: 0 auto;
    }

    .recommend .box .list .list-item-body .info {
        display: flex;
        flex-wrap: wrap;
    }

    .recommend .box .list .list-item-body .info .price {
        padding-top: 5px;
        color: red;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
    }

    .recommend .box .list .list-item-body .info .name {
        padding-top: 5px;
        color: red;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
    }

    .recommend .box .list .list-item3 {
        flex: 0 0 33.33%;
    }

    .recommend .box .list .list-item5 {
        flex: 0 0 25%;
    }

    .recommend .box .news {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        width: 100%;
    }

    .recommend .box .news .list-item {
        flex: 0 0 50%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .recommend .box .news .list-item .list-item-body {
        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 3);
        padding: 10px;
        box-sizing: border-box;
        display: flex;
    }

    .recommend .box .news .list-item .list-item-body img {
        width: 120px;
        height: 100%;
        display: block;
        margin: 0 auto;
    }

    .recommend .box .news .list-item .list-item-body .item-info {
        flex: 1;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding-left: 10px;
        box-sizing: border-box;
    }

    .recommend .box .news .list-item .list-item-body .item-info .name {
        padding-top: 5px;
        color: red;
        font-size: 14px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .recommend .box .news .list-item .list-item-body .item-info .time {
        padding-top: 5px;
        color: red;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        box-sizing: border-box;
    }

    .recommend .box .news .list-item1 {
        flex: 0 0 100%;
    }

    .recommend .box .news .list-item3 {
        flex: 0 0 33.33%;
    }


    /*标题*/
    .index-title {
        text-align: center;
        box-sizing: border-box;
        width: 980px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .index-title span {
        padding: 0 10px;
        line-height: 1.4;
    }


    /*表格 start*/
    .paper-container {
        width: 980px;
        margin: 0 auto;
        margin-top: 20px;
        text-align: center;
    }
    .paper-container thead {
        border-radius: 100px;
    }
    .paper-container thead tr th {
        font-size: 16px;
        font-weight: blod;
        line-height: 50px;
        height: 50px;
        text-align: center;
    }
    .paper-container tbody tr td {
        font-size: 16px;
        height: 50px;
        border-bottom: 5px dotted #EEEEEE;
    }
    .paper-container thead tr {
        background-color: rgba(245, 245, 245, 1);
        color: #000;
    }
    .paper-container tbody tr:hover{
        color: #FFFFFF;
        background-color: var(--publicMainColor, #808080);
    }
    /* 表格 end */
    /* 按钮及价格 */
    .btn-container {
        margin-top: 20px;
        text-align: right;
        margin-bottom: 60px;
        border: 2px dotted #EEEEEE;
        padding: 20px;
    }
    /* 购买数量 start*/
    .num-picker {
        display: flex;
        align-items: center;
        margin-right: 20px;
    }
    .num-picker button {
        border: 0;
        font-size: 20px;
    }
    .num-picker input {
        width: 50px;
        text-align: center;
        height: 40px;
    }</style>
<body>
<div id="app">
    <div class="banner">
        <div class="layui-carousel" id="swiper"
             :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
            <div carousel-item>
                <div v-for="(item,index) in swiperList" :key="index">
                    <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/>
                </div>
            </div>
        </div>
    </div>
    <!-- 标题 -->
    <div class="index-title sub_backgroundColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"20px auto","borderColor":"rgba(0,0,0,.3)","color":"#333","borderRadius":"0px","borderWidth":"0","fontSize":"25px","borderStyle":"solid","height":"auto"}'>
        <span>SHOP / CART</span><span>购物车</span>
    </div>
    <!-- 标题 -->
    <div class="paper-container">
        <table class="layui-table" lay-skin="nob">
            <thead>
            <tr>
                <th>名称</th>
                <th>现价/积分</th>
                <th>购买数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in dataList" v-bind:key="index">
                <td style="display: flex;text-align: left;">
                    <img :src="item.tushuPhoto" style="width: 50px;height: 50px;object-fit: cover;">
                    <div style="margin-left: 10px;margin-top: 10px;">
                        {{item.tushuName}}
                    </div>
                </td>
                <td style="width: 200px;">{{item.tushuNewMoney}} RMB</td>
                <td style="width: 150px;">
                    <div class="num-picker">
                        <button type="button" @click="reduceCartNum(index)" class="layui-btn layui-btn-primary">-</button>
                        <input style="height: 38px;" type="number" :value="item.buyNumber" id="buyNumber" name="buyNumber" class="layui-input" disabled="disabled" />
                        <button type="button" @click="addCartNum(index)" class="layui-btn layui-btn-primary">+</button>
                    </div>
                </td>
                <td style="width: 200px;">{{(item.tushuNewMoney*item.buyNumber).toFixed(2)}} RMB</td>
                <td style="width: 100px;">
                    <button @click="deleteCart(index)" type="button" class="layui-btn layui-btn-radius btn-theme">
                        <i class="layui-icon">&#xe640;</i> 删除
                    </button>
                </td>
            </tr>
            </tbody>
        </table>


        <div class="btn-container">
					<span style="font-size: 18px;font-weight: bold;color: rgba(214, 30, 30, 1);margin-right: 20px;">
						总价：{{totalZongjiaMoney.toFixed(2)}}RMB
					</span>
            <button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0 5px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 153, 0, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"4px","borderWidth":"0","width":"auto","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'  @click="buyClick" type="button" class="layui-btn layui-btn-lg btn-theme">
                <i class="layui-icon">&#xe657;</i> 点击购买
            </button>
        </div>
    </div></div>

<script src="../../xznstatic/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<script src="../../js/config.js"></script>
<script src="../../modules/config.js"></script>
<script src="../../js/utils.js"></script>

<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            swiperList: [],

            //查询条件
            searchForm: {
                page: 1
                ,limit: 8
            },


            dataList: [],
        },
        filters: {
            subString: function(val) {
                if (val) {
                    val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
                    if (val.length > 60) {
                        val = val.substring(0, 60);
                        val+='...';
                    }
                    return val;
                }
                return '';
            }
        },
        computed: {
            totalZongjiaMoney: function() {
                var total = 0;
                for (var item of this.dataList) {
                    total += item.tushuNewMoney * item.buyNumber
                }
                return total;
            }
        },
        methods: {
            isAuth(tablename, button) {
                return isFrontAuth(tablename, button);
            }
            ,jump(url) {
                jump(url);
            }
            ,jumpCheck(url,check1,check2) {
                if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除]
                    layui.layer.msg("已经被删除", {
                        time: 2000,
                        icon: 2
                    });
                    return false;
                }
                if(check2 == "2"  || check2 == 2){//是否下架[1:上架 2:下架]
                    layui.layer.msg("已经下架", {
                        time: 2000,
                        icon: 2
                    });
                    return false;
                }
                this.jump(url);
            }
			// 添加数量
			,addCartNum(index) {
				// 查询对应的商品的详情信息，判断是否有商品限次，库存的判断
				var item = this.dataList[index];
				layui.http.request(`tushu/info/${item.tushuId}`, 'get', {}, function(res) {
					// 库存限制
					if (res.data.tushuKucunNumber && res.data.tushuKucunNumber > 0 && res.data.tushuKucunNumber <= item.buyNumber) {
						layui.layer.msg(`图书库存不足`, {
							time: 2000,
							icon: 5
						});
						return
					}
					item.buyNumber = item.buyNumber + 1;
					layui.http.requestJson(`cart/update`, 'post', item, function(res) {});
				});
			}
			// 减少数量
			,reduceCartNum(index) {
				var item = this.dataList[index];
				if (item.buyNumber > 1) {
					item.buyNumber = item.buyNumber - 1;
					layui.http.requestJson(`cart/update`, 'post', item, function(res) {});
				}
			}
			// 删除
			,deleteCart(index) {
				var item = this.dataList[index];
				layui.http.requestJson(`cart/delete`, 'post', [item.id], function(res) {
					window.location.reload();
				});
			}
			// 购买
			,buyClick() {
			 	if(this.dataList.length<=0){
                        layui.layer.msg(`您的购物车为空，快去将自己喜欢的商品放入购物车吧！`, {
                        time: 2000,
                        icon: 5
                    });
                    return false;
                }
				localStorage.setItem('tushus', JSON.stringify(this.dataList));
				window.location.href = '../tushuOrder/confirm.html'
			}        }
    });

    layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() {
        var layer = layui.layer;
        var element = layui.element;
        var carousel = layui.carousel;
        var laypage = layui.laypage;
        var http = layui.http;
        var laydate = layui.laydate;
        var tinymce = layui.tinymce;
        window.jQuery = window.$ = jquery = layui.jquery;

        // var id = http.getParam('id');

        // 获取轮播图 数据
        http.request('config/list', 'get', {
            page: 1,
            limit: 5
        }, function (res) {
            if (res.data.list.length > 0) {
                let swiperList = [];
                res.data.list.forEach(element => {
                    if(element.value != null){
                        swiperList.push({
                            img: element.value
                        });
                    }
                });
                vue.swiperList = swiperList;

                vue.$nextTick(() => {
                    carousel.render({
                        elem: '#swiper',
                        width: '100%',
                        height: '450px',
                        arrow: 'hover',
                        anim: 'default',
                        autoplay: 'true',
                        interval: '3000',
                        indicator: 'inside'
                    });
                });
            }
        });



        // 获取列表数据
        http.request('cart/page', 'get', {
            page: 1,
            limit: vue.searchForm.limit,
            yonghuId: localStorage.getItem('userid')
        }, function(res) {
            vue.dataList = res.data.list
            // 分页
            laypage.render({
                elem: 'pager',
                count: res.data.total,
                limit: vue.searchForm.limit,
                jump: function(obj, first) {
                    //首次不执行
                    if (!first) {
                        http.request('news/list', 'get', {
                            page: obj.curr,
                            limit: obj.limit,
                            yonghuId: localStorage.getItem('userid')
                        }, function(res) {
                            vue.dataList = res.data.list
                        })
                    }
                }
            });
        })    });

    window.xznSlide = function () {
        jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000});
        jQuery("#ifocus").slide({
            titCell: "#ifocus_btn li",
            mainCell: "#ifocus_piclist ul",
            effect: "leftLoop",
            delayTime: 200,
            autoPlay: true,
            triggerTime: 0
        });
        jQuery("#ifocus").slide({titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true});
        jQuery(".product_list").slide({
            mainCell: ".bd ul",
            autoPage: true,
            effect: "leftLoop",
            autoPlay: true,
            vis: 5,
            trigger: "click",
            interTime: 4000
        });
    };
</script>
</body>
</html>
